<template>
    <div class="login">
        <vue-particles id="tsparticles" :particlesInit="particlesInit" :options="options" />
        <div class="login-wrapper">
            <div class="login-header" :style="isMiniWidth ? `transform: scale(${zoom});` : ''">
                <h2 class="glow-text">FyZeeVoo World</h2>
                <p class="subtitle">探索无限可能的视频世界</p>
            </div>
            <div class="login-container">
                <div class="form-box">
                    <div class="input-box">
                        <i class="iconfont icon-zhanghao"></i>
                        <input type="text" v-model="username">
                        <label :class="username.length != 0 ? 'label-up' : ''">账号</label>
                        <span class="input-line"></span>
                    </div>
                    <div class="input-box">
                        <i class="iconfont icon-mima"></i>
                        <input type="password" v-model="password">
                        <label :class="password.length != 0 ? 'label-up' : ''">密码</label>
                        <span class="input-line"></span>
                    </div>
                    <el-button class="login-btn pulse" @click="login" color="#3c6d9e" :dark="isDark"
                        plain>登录</el-button>
                    <div class="tips">
                        不是管理员？<a href="http://localhost:8787" target="_blank">主站</a>请走这边，如需权限请<a>联系管理员</a>申请
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { loadFull } from "tsparticles";
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
    name: "LoginVue",
    data() {
        return {
            username: "",
            password: "",
            isMiniWidth: false, // 是否小窗
            zoom: 1,    // 小窗下，h2的缩放比例
            options: {
                background: {
                    image: "url(" + require('@/assets/img/login-bg.jpg') + ")",
                    position: "center", // 图像位置，可以根据需要调整
                    repeat: "no-repeat", // 图像不重复
                    size: "cover",
                },
                particles: {
                    number: {
                        value: 60,
                        density: {
                            enable: true,
                            value_area: 631.3280775270874
                        }
                    },
                    color: {
                        value: "#fff"
                    },
                    shape: {
                        type: "circle",
                        stroke: {
                            width: 0,
                            color: "#000000"
                        },
                        polygon: {
                            nb_sides: 5
                        },
                        image: {
                            src: "img/github.svg",
                            width: 100,
                            height: 100
                        }
                    },
                    opacity: {
                        value: 0.7,
                        random: true,
                        anim: {
                            enable: false,
                            speed: 1,
                            opacity_min: 0.1,
                            sync: false
                        }
                    },
                    size: {
                        value: 5,
                        random: true,
                        anim: {
                            enable: false,
                            speed: 40,
                            size_min: 0.1,
                            sync: false
                        }
                    },
                    line_linked: {
                        enable: false,
                        distance: 500,
                        color: "#ffffff",
                        opacity: 0.4,
                        width: 2
                    },
                    move: {
                        enable: true,
                        speed: 1.5,
                        direction: "bottom",
                        random: false,
                        straight: false,
                        out_mode: "out",
                        bounce: false,
                        attract: {
                            enable: false,
                            rotateX: 600,
                            rotateY: 1200
                        }
                    }
                },
                interactivity: {
                    detect_on: "canvas",
                    events: {
                        onhover: {
                            enable: false,
                            mode: "bubble"
                        },
                        onclick: {
                            enable: true,
                            mode: "repulse"
                        },
                        resize: true
                    },
                    modes: {
                        grab: {
                            distance: 400,
                            line_linked: {
                                opacity: 0.5
                            }
                        },
                        bubble: {
                            distance: 400,
                            size: 4,
                            duration: 0.3,
                            opacity: 1,
                            speed: 3
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4
                        },
                        push: {
                            particles_nb: 4
                        },
                        remove: {
                            particles_nb: 2
                        }
                    }
                },
                retina_detect: true
            }
        }
    },
    methods: {
        // 初始化粒子特效
        particlesInit(engine) {
            return loadFull(engine);
        },
        // 登录
        async login() {
            if (this.username.length == 0) {
                ElMessage.error("请输入账号");
                return;
            }
            if (this.password.length == 0) {
                ElMessage.error("请输入密码");
                return;
            }
            this.$store.state.isLoading = true;
            // 这里为了更方便捕捉到错误后给出提示，就不使用封装的函数了
            const result = await axios.post("/api/admin/account/login", {
                username: this.username,
                password: this.password,
            }).catch(() => {
                ElMessage.error("用户名或密码错误");
                this.$store.state.isLoading = false;
            });
            if (!result) {
                this.$store.state.isLoading = false;
                return;
            }
            if (result.data.code !== 200) {
                ElMessage.error(result.data.message);
                this.$store.state.isLoading = false;
            }
            if (result.data.code === 200) {
                localStorage.setItem("teri_token", result.data.data.token); // 浏览器缓存token
                this.$store.commit("updateUser", result.data.data.user);    // 更新vuex中当前用户信息
                ElMessage.success(result.data.message);
                this.$store.commit("updateIsLogin", true);  // 修改在线状态
                this.$router.push("/"); // 跳转首页
                this.$store.state.isLoading = false;
            }
        },

        // 判断是否小窗
        changeWidth() {
            if (window.innerWidth < 444) {
                this.zoom = window.innerWidth * 0.9 / 400;
                this.isMiniWidth = true;
            } else {
                this.isMiniWidth = false;
            }
        },
    },
    mounted() {
        // 监听窗口大小变化，判断是否小窗
        window.addEventListener('resize', this.changeWidth);
    },
    unmounted() {
        window.removeEventListener('resize', this.changeWidth);
    }
}
</script>

<style scoped>
.login-wrapper {
    position: absolute;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(15px);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(60, 109, 158, 0.3);
    overflow: hidden;
    animation: fadeIn 0.8s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 10;
    /* 确保登录框在粒子之上 */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.login-header {
    position: relative;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
    /* 减少底部间距 */
}

.login-header h2 {
    position: relative;
    font-weight: 600;
    font-size: 2.5em;
    color: #fff;
    text-shadow: 0 5px 15px rgb(0, 0, 0), 0 0 10px rgba(60, 109, 158, 0.8);
    margin-bottom: 5px;
    top: auto;
    left: auto;
    transform: none;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
        /* 减小浮动幅度 */
    }

    100% {
        transform: translateY(0);
    }
}

.glow-text {
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 0 5px 15px rgb(0, 0, 0), 0 0 10px rgba(60, 109, 158, 0.8);
    }

    to {
        text-shadow: 0 5px 15px rgb(0, 0, 0), 0 0 20px rgba(60, 109, 158, 0.8), 0 0 30px rgba(60, 109, 158, 0.6);
    }
}

.login-header .subtitle {
    color: #ffffff;
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 5px;
    /* 减小底部间距 */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    animation: fadeInUp 1s ease 0.5s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
        /* 减小移动距离 */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
    /* 添加顶部间距 */
}

.form-box {
    width: 100%;
    padding: 10px 40px 30px 40px;
    /* 调整内边距 */
}

.input-box {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 20px 0;
    /* 减少垂直间距 */
    transition: all 0.3s ease;
    overflow: visible;
    /* 更改为可见，防止内容被裁剪 */
}

.input-box .input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    transform: translateX(0);
    /* 默认显示线条 */
    transition: all 0.5s ease;
}

.input-box:focus-within .input-line {
    background-color: #3c6d9e;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 35px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #ffffff;
    pointer-events: none;
    transition: .5s;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 1;
    /* 确保标签显示在上层 */
}

.input-box input:focus~label,
.label-up {
    top: -5px !important;
    left: 35px;
    color: #5a8dc2;
    font-size: 0.9em;
    text-shadow: 0 0 5px rgba(90, 141, 194, 0.5);
}

.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    padding: 0 5px 0 35px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    position: relative;
    /* 添加相对定位 */
    z-index: 0;
    /* 保证输入框在标签下层 */
}

.input-box input:focus {
    border-bottom: 2px solid #3c6d9e;
    z-index: 2;
    /* 聚焦时提升层级 */
}

.input-box .iconfont {
    position: absolute;
    left: 5px;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 48px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 2;
    /* 确保图标显示 */
}

.input-box:focus-within .iconfont {
    color: #5a8dc2;
    transform: translateY(-2px);
    text-shadow: 0 0 5px rgba(90, 141, 194, 0.5);
}

.login-btn {
    width: 100%;
    height: 45px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 20px;
    /* 调整按钮上边距 */
    border: none !important;
    box-shadow: 0 5px 15px rgba(60, 109, 158, 0.4);
    background: linear-gradient(135deg, #4a8abf 0%, #3c6d9e 100%) !important;
    color: white !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #5a8dc2 0%, #4a8abf 100%);
    transition: all 0.6s ease;
    z-index: -1;
}

.login-btn:hover::before {
    left: 0;
}

.login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(60, 109, 158, 0.6);
}

.login-btn:active {
    transform: translateY(0);
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(60, 109, 158, 0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(60, 109, 158, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(60, 109, 158, 0);
    }
}

.tips {
    font-size: .9em;
    color: #ffffff;
    margin-top: 15px;
    /* 减小间距 */
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.tips a {
    cursor: pointer;
    color: #5a8dc2;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.tips a:hover {
    color: #7aa7d9;
    text-decoration: none;
}

.tips a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #7aa7d9;
    transition: all 0.3s ease;
}

.tips a:hover::after {
    width: 100%;
}

@media (max-width: 444px) {
    .form-box {
        padding: 5px 30px 15px 30px;
    }

    .login-wrapper {
        width: 90vw;
    }

    .input-box {
        margin: 15px 0;
        height: 40px;
    }

    .login-btn {
        height: 40px;
        margin-top: 15px;
    }

    .login-header h2 {
        font-size: 2em;
    }

    .login-header .subtitle {
        font-size: 0.9em;
    }
}
</style>